<style lang="less" scoped>
    .header{
        border-bottom: 1px solid #efefef;
    }
    .main_all{
        background: #fff;
    }
    .order_t{
        padding: 0.1rem 0.3rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        .orderInfo{
            width: 1.4rem;
            height: 1.4rem;
            background: #bfbfbf;
            margin-right: 0.34rem;
        }
        .e_x{
            flex:1;
            font-size: 0.3rem;
            color: #353535;
            p{
                margin-bottom: 0.3rem;
            }
            ul{
                overflow: hidden;
                li{
                    float: left;
                    width: 0.32rem;
                    height: 0.32rem;
                    margin-right: 0.26rem;
                    background: url("../../assets/img/evlua_icon.png") no-repeat;
                    background-size: 100% 100%;
                    background-position: center;
                    &.active{
                        background: url("../../assets/img/evluaActive_icon.png") no-repeat;
                        background-size: 100% 100%;
                        background-position: center;
                    }
                }
            }
        }
    }
    .img_box {
        width: 100%;
        padding: 0 0.32rem 0.56rem;
        margin-bottom: 0.76rem;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
    }
</style>
<template>
    <div>
        <v-header>
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
            <a slot="right" href="javascript:void(0)" @click="submits">
                <span style="color:#333;">提交</span>
            </a>
        </v-header>
        <div class="main_all main_allScroll">
            <div class="order_t">
                <div class="orderInfo">
                    <img :src="goods.mainImg" alt="" style="display: block;width:100%;height:100%;">
                </div>
                <div class="e_x">
                    <p><i :class="$route.query.type == '3' || $route.query.type == '1' ?'mall_proprietary_icon':$route.query.type == '5'?'province_recommend_icon':''"></i>{{goods.name}}</p>
                    <ul>
                        <li v-for="(v, i) in 5" :class="v <= rater ? 'active' : ''" @click="onEvent(v)" :key="i"></li>
                    </ul>
                </div>
            </div>
            <group height="2.5rem">
                <x-textarea :max="200" :placeholder="goods.placeholder" :show-counter="false" :rows="8" :cols="30" v-model="goods.value"></x-textarea>
            </group>
            <div class="img_box">
                <div  class="downImg" v-for="(item,index) in images">
                    <div class="delete" v-on:click="imgDelete(index)"></div>
                    <img v-lazy="item.prefix + item.imageUrl" alt="" @click="Interactive.productImageClick(item.prefix +  item.imageUrl,0)">
                </div>
                <div class="downImg" v-if="images.length<=5" v-on:click="addImg">
                    <div class="camera_icon"></div>
                    <span style="margin-top: 0.3rem">添加图片</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { XTextarea, Group} from 'vux'
    import { evaluate } from '../../api/my'
    import {mapActions, mapState} from 'vuex'
    export default {
        components: {
            XTextarea,
            Group,
        },
        data(){
            return {
                goods: {
                    title:"商品评价",   //header头部内容
                    name:"商品评分",  //商品名称
                    placeholder:'亲，东西满足你的期待吗？请评价下它吧~',   //textarea默认文字
                    mainImg: '',
                    value: ''
                },
                type:0,
                rater: 5,
                images:[]
            }
        },
        activated:function () {
            let obj = this.$route.query;
            this.goods.title = obj.title;
            this.goods.name = obj.name;
            this.goods.mainImg = obj.mainImage;
            this.goods.value='';
            this.images=[];
            this.type=0;
            this.rater=5;
        },
        methods: {
            imgDelete(index){
                this.images.splice(index, 1);
            },
            onEvent (event) {
                console.log('on', event)
                this.rater = event
            },
            addImg(){
                this.Interactive.uploadPictures('14');
            },
            pushImgSucc() {
                this.UPDATA_INTERACTIVE({url: ''})
            },
            submits () {
                let that = this;
                let str =  '';
                for(let i = 0 ; i < this.images.length; i++){
                    let obj = this.comJS.pushImg(this.images[i]);
                    str += obj;
                    if(i !== this.images.length-1){
                        str += ','
                    }
                }
                let arr1=[];
                arr1.push({subTemplateId: this.$route.query.subTemplateId,templateId: this.$route.query.templateId, score: this.rater * 20, content: this.goods.value.trim(), images: str});
                this.$ajax.order.evaluate({orderId:this.$route.query.orderId,deliveryJudge:this.$route.query.deliveryJudge,judgeDetail:JSON.stringify(arr1)})
                    .then((res)=>{
                        that.$vux.toast.text('评价成功，1秒后自动返回', 'middle');
                        if(that.$route.query.type == '1'){
                          setTimeout(function (){
                            that.Interactive.activityWebDismiss();
                          },1000)
                        }else{
                          setTimeout(function (){
                            that.$router.goBack();
                          },1000)
                        }
                    })
            }
        },
        watch:{
            "interactive.image": function () {
                if (this.interactive.image.url) {
                    this.images.push(this.interactive.image.url);
                    this.pushImgSucc();
                }
            }
        },
        computed: mapState({user: state => state.user, interactive: state => state.interactive}),
    }
</script>